import React, { useState, useEffect } from 'react';
import { Form, Input, Radio, Select, Table, Tooltip, Icon } from 'antd';
import Difference from '@/pages/WorkFlow/components/FormControls/components/Difference';

const { TextArea } = Input;
const { Option } = Select;

const DepartmentEdit = ({ form, data, wrapperLayout, relativeList }) => {
    // console.log('======>data', data);`
    const { getFieldDecorator } = form;
    const { compareDataField, oldBusinessData, adjustDutyList } = data; // 数据源
    const [compareDataMap, setCompareDataMap] = useState({}); // 差异化对比映射数据源（非表格）
    // console.log(compareDataMap, 'compareDataMap');
    const { updateFieldNames } = compareDataField;
    useEffect(() => {
        // 将有变更的数据进行映射
        if (updateFieldNames && updateFieldNames?.length > 0) {
            const obj = {};
            updateFieldNames.forEach(item => {
                obj[item] = oldBusinessData[item];
            });
            setCompareDataMap(obj);
        }
    }, [updateFieldNames, oldBusinessData]);

    const columns = [
        {
            title: '员工',
            dataIndex: 'employeeName',
            width: '30%',
            render: (text, record) => (
                <div>
                    {text}
                    <span style={{ color: '#8c8c8c' }}> - {record.fromDutyName}</span>
                </div>
            )
        },
        {
            title: '变更前',
            dataIndex: 'fromOrgName',
            width: '30%',
            render: (text, record) => (
                <div>
                    {text}&nbsp;
                    <Tooltip title={record.fromFullOrgPathName} placement="top">
                        <Icon className="autoVisibleIcon" type="exclamation-circle" />
                    </Tooltip>
                </div>
            )
        },
        {
            title: '变更后',
            dataIndex: 'toOrgName',
            width: '30%',
            render: (text, record) => (
                <div>
                    {text}&nbsp;
                    <Tooltip title={record.toFullOrgPathName} placement="top">
                        <Icon className="autoVisibleIcon" type="exclamation-circle" />
                    </Tooltip>
                </div>
            )
        }
    ];
    return (
        <>
            <Form {...wrapperLayout}>
                <Form.Item label="上级机构">
                    <Difference tip={compareDataMap?.parentOrganizationName}>
                        {getFieldDecorator('parentOrganizationName', {
                            initialValue: data?.parentOrganizationName
                        })(<Input disabled />)}
                    </Difference>
                </Form.Item>
                <Form.Item label="部门名称(中文)">
                    <Difference tip={compareDataMap?.organizationName}>
                        {getFieldDecorator('organizationName', {
                            initialValue: data?.organizationName
                        })(<Input disabled />)}
                    </Difference>
                </Form.Item>
                <Form.Item label="部门名称(英文)">
                    <Difference tip={compareDataMap?.organizationNameEnglish}>
                        {getFieldDecorator('organizationNameEnglish', {
                            initialValue: data?.organizationNameEnglish
                        })(<Input disabled />)}
                    </Difference>
                </Form.Item>
                <Form.Item label="排序号">
                    <Difference tip={compareDataMap?.sort}>
                        {getFieldDecorator('sort', {
                            initialValue: data?.sort
                        })(<Input disabled />)}
                    </Difference>
                </Form.Item>
                <Form.Item label="是否助理团">
                    <Difference tip={compareDataMap?.assistantFlag}>
                        {getFieldDecorator('assistantFlag', {
                            initialValue: data?.assistantFlag
                        })(
                            <Radio.Group disabled>
                                <Radio value={0}>否</Radio>
                                <Radio value={1}>是</Radio>
                            </Radio.Group>
                        )}
                    </Difference>
                </Form.Item>

                <Form.Item label="关联机构">
                    <Difference
                        tip={
                            compareDataMap?.relateOrganizationCodes &&
                            compareDataMap.relateOrganizationCodes.map(
                                item => relativeList.find(x => x.organizationCode === item)?.organizationName
                            )
                        }
                    >
                        {getFieldDecorator('relateOrganizationCodes', {
                            initialValue: data?.relateOrganizationCodes
                        })(
                            <Select mode="multiple" getPopupContainer={trigger => trigger.parentNode} disabled>
                                {relativeList
                                    .filter(item => item.assistantFlag !== data?.assistantFlag)
                                    .map(item => (
                                        <Option value={item.organizationCode} key={item.organizationCode}>
                                            {item.organizationName}
                                            {item?.auditStatus === 1 && '(审批中)'}
                                        </Option>
                                    ))}
                            </Select>
                        )}
                    </Difference>
                </Form.Item>
                {/* <Form.Item label="主管称呼">
                <Difference tip={compareDataMap?.titleName}>
                    {getFieldDecorator('titleName', {
                        initialValue: data?.titleName
                    })(<Input disabled />)}
                </Difference>
            </Form.Item> */}
                <Form.Item label="部门电话">
                    <Difference tip={compareDataMap?.phone}>
                        {getFieldDecorator('phone', {
                            initialValue: data?.phone
                        })(<Input disabled />)}
                    </Difference>
                </Form.Item>
                <Form.Item label="部门简介(中文)">
                    <Difference tip={compareDataMap?.organizationDesc}>
                        {getFieldDecorator('organizationDesc', {
                            initialValue: data?.organizationDesc
                        })(<TextArea disabled autosize={{ minRows: 10, maxRows: 20 }} maxLength={10000} />)}
                    </Difference>
                </Form.Item>
                <Form.Item label="部门简介(英文)">
                    <Difference tip={compareDataMap?.organizationDescEnglish}>
                        {getFieldDecorator('organizationDescEnglish', {
                            initialValue: data?.organizationDescEnglish
                        })(<TextArea disabled autosize={{ minRows: 10, maxRows: 20 }} maxLength={20000} />)}
                    </Difference>
                </Form.Item>
            </Form>
            {!(compareDataMap?.parentOrganizationCode || adjustDutyList?.length < 1) ? (
                <div style={{ marginBottom: 12 }}>
                    <div style={{ fontSize: ' 16px', fontWeight: 'bold' }}>部门人员</div>
                    <p style={{ margin: '16px 0' }}>变更结果:</p>
                    <Table
                        dataSource={adjustDutyList}
                        columns={columns}
                        scroll={{ y: 600 }}
                        rowKey="employeeCode"
                        pagination={false}
                    />
                </div>
            ) : null}
        </>
    );
};

export default Form.create()(DepartmentEdit);
